<template>
  <el-table :data="tableData" style="width: 100%" max-height="580">
    <el-table-column
        prop="index"
        label="序号"
        width="100"
        align="center"
        fixed
    ></el-table-column>
    <el-table-column
        prop="dispatcher"
        label="调度员"
        width="150"
        align="center"
    ></el-table-column>
    <el-table-column
        prop="pickupCount"
        label="摘机数"
        width="150"
        align="center"
    ></el-table-column>
    <el-table-column
        prop="carRequestCount"
        label="要车数"
        width="150"
        align="center"
    ></el-table-column>
    <el-table-column
        prop="dispatchCount"
        label="派车数"
        width="150"
        align="center"
    ></el-table-column>
    <el-table-column prop="avgPickupTime" label="平均摘机用时(s)" width="200" align="center">
      <template #default="scope">
        <BarProgress :value="scope.row.avgPickupTime" :good="3" :warn="6" :max="10" />
      </template>
    </el-table-column>
    <el-table-column prop="avgAcceptTime" label="平均受理用时(s)" width="200" align="center">
      <template #default="scope">
        <BarProgress :value="scope.row.avgAcceptTime" :good="30" :warn="60" :max="80" />
      </template>
    </el-table-column>
    <el-table-column prop="avgDispatchTime" label="平均调度用时(s)" width="200" align="center">
      <template #default="scope">
        <BarProgress :value="scope.row.avgDispatchTime" :good="30" :warn="60" :max="80" />
      </template>
    </el-table-column>
    <el-table-column
        prop="pickupRate3s"
        label="3s摘机率"
        width="200"
        align="center"
    >
      <template #default="scope">
        <el-progress
            type="circle"
            :percentage="Number(scope.row.pickupRate3s.slice(0, -1))"
            :width="60"
            :format="(percentage) => `${percentage}%`"
            :color="customColors"
        ></el-progress>
      </template>
    </el-table-column>
    <el-table-column
        prop="pickupRate10s"
        label="10s摘机率"
        width="200"
        align="center"
    >
      <template #default="scope">
        <el-progress
            type="circle"
            :percentage="Number(scope.row.pickupRate10s.slice(0, -1))"
            :width="60"
            :format="(percentage) => `${percentage}%`"
            :color="customColors"
        ></el-progress>
      </template>
    </el-table-column>
    <el-table-column
        prop="avgOnSeatTime"
        label="平均就席时长"
        width="150"
        align="center"
    ></el-table-column>
    <el-table-column
        prop="avgOffSeatTime"
        label="平均离席时长"
        width="150"
        align="center"
    ></el-table-column>
  </el-table>
</template>

<script>
import BarProgress from "_c/BarProgress.vue";

export default {
  components: {
    BarProgress
  },
  data() {
    return {
      customColors: [
        {color: '#f56c6c', percentage: 60},
        {color: '#e6a23c', percentage: 80},
        {color: '#5cb87a', percentage: 100}
      ],
      tableData: [
        {
          index: 1,
          dispatcher: '张三',
          pickupCount: 120,
          carRequestCount: 98,
          dispatchCount: 95,
          avgPickupTime: 0.74,
          avgAcceptTime: 15.3,
          avgDispatchTime: 22.3,
          pickupRate3s: '40%',
          pickupRate10s: '77%',
          avgOnSeatTime: '45分钟',
          avgOffSeatTime: '15分钟'
        },
        {
          index: 2,
          dispatcher: '李四',
          pickupCount: 105,
          carRequestCount: 86,
          dispatchCount: 82,
          avgPickupTime: 1.14,
          avgAcceptTime: 14.8,
          avgDispatchTime: 62.7,
          pickupRate3s: '88%',
          pickupRate10s: '98%',
          avgOnSeatTime: '42分钟',
          avgOffSeatTime: '18分钟'
        },
        {
          index: 3,
          dispatcher: '王五',
          pickupCount: 132,
          carRequestCount: 105,
          dispatchCount: 102,
          avgPickupTime: 6.82,
          avgAcceptTime: 16.5,
          avgDispatchTime: 47.3,
          pickupRate3s: '100%',
          pickupRate10s: '97%',
          avgOnSeatTime: '48分钟',
          avgOffSeatTime: '12分钟'
        }
      ]
    }
  },
  methods: {

  }
}
</script>
<style lang="scss" scoped>

</style>
